<template>
 <div>
  <div class="banner" @click="handleBannerClick">
    <img :src="bannerImg">
    <div class="banner-info">
    AAAAAA景区 <div class="info-right"><span class="iconfont">&#xe6e4;</span><em>22</em></div>
    </div>
  </div>
  <fade-animation>
  <detail-gallery  :galleryImgs="galleryImgs" v-if="show" @handleGalleryClick="handleGalleryClick"></detail-gallery>
  </fade-animation>
 </div>
</template>

<script>
import DetailGallery from 'common/gallery/Gallery'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  props: ['bannerImg', 'galleryImgs'],
  components: {
    DetailGallery,
    FadeAnimation
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    handleBannerClick () {
      this.show = true
    },
    handleGalleryClick () {
      this.show = false
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner:after
    content:""
    min-height:.6rem
    position:absolute
    left:0
    right:0
    bottom:0
    background:transparent
    background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8))
  .banner
    width:100%
    height:0
    padding-bottom:55%
    overflow:hidden
    position:relative
    img
      width:100%
    .banner-info
      display:flex
      justify-content:space-between
      position:absolute
      bottom:.25rem
      left:0
      right:0
      height:.4rem
      line-height:.4rem
      font-size:.36rem
      color:#fff
      padding:0 .2rem
      .info-right
        border-radius:.1rem
        background:rgba(0,0,0,0.8)
        height:.4rem
        width:1.2rem
        text-align:center
</style>
